<template>
  <div :class="className" :style="{height:height,width:width}" :opention="opention" />
</template>

<script>
import echarts from 'echarts'
import resize from './mixins/resize'

export default {
    mixins: [resize],
    props: {
        className: {
            type: String,
            default: 'chart',
        },
        width: {
            type: String,
            default: '100%',
        },
        height: {
            type: String,
            default: '300px',
        },
        opention: {

        }
    },
    data() {
        return {
            chart: null,
        }
    },
    watch:{
        opention(val){
          if(this.chart){
            this.chart.clear();
            this.initChart()
          }
        }
    },
    methods: {
        initChart() {
            let self = this;
            self.chart = echarts.init(self.$el, 'macarons');
            self.chart.setOption(self.opention);
        },
    },
    mounted() {
        let self = this;
        self.$nextTick(() => {
            self.initChart();
        });
    },
    beforeDestroy() {
        let self = this;
        if (!self.chart) {
            return;
        }
        self.chart.dispose()
        self.chart = null
    },
}
</script>
